<template>
  <div class="animation-area" ref="Canvas" id="canvas-container">
    <div class="header traversal-header" >
      <el-input placeholder="数字" size="small" v-model="value"></el-input>
      <el-button type="success" size="small" @click="push">
        入栈
        <i class="el-icon-plus"></i>
      </el-button>
      <el-button type="success" size="small" @click="pop">
        出栈
        <i class="el-icon-delete"></i>
      </el-button>
    </div>
    <canvas id="canvas" style="width: 100vh; height: 100vh"></canvas>
  </div>
</template>

<script>

import create from '@/js/create'
import mixin from '@/mixins'
import Rect from '@/node/Rect'
import Color from '@/utils/Color'
import { Wrapper, SequentialStack } from '@/node/Wrapper'
import { v4 as uuidv4 } from 'uuid'

export default {
  name: "SequentialStack",
  mixins: [mixin],
  data() {
    return {
      nums: [1324,12323,123213],
      value: '',
      SequentialStack: [],
      canvasStack:[],
      top: 0,
    }
  },
  mounted() {
    this.build()
    create.init()
  },
  methods: {
    build() {
      this.init()
    },
    createStack() {
      let startX = this.$refs.Canvas.clientWidth / 2 - 100

      let startY = this.$refs.Canvas.clientHeight / 2

      let tx = startX
      let ty = startY - SequentialStack.height * (this.top);

      let x = tx + SequentialStack.width / 2
      let y = ty + SequentialStack.height / 2

      let stack = new SequentialStack(x, y, tx, ty, this.value, this.top, this.top, 'white');

      stack.draw(this.ctx);

      this.canvasStack.push(stack)
    },
    push() {
      this.createStack()
      this.SequentialStack.push(this.value)
      this.top ++;
    },
    pop() {
      if(this.top > 0) {
        alert(this.SequentialStack[this.top - 1]);
        this.SequentialStack.pop();
        this.canvasStack[this.top - 1].clear(this.ctx);
        this.canvasStack.pop();
        this.top --;
      } else {
        alert("栈为空")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.traversal-header {
  display: flex;

  align-items: center;

  > .el-input {
    width: 150px;
  }

  .el-button {
    height: 32px;
    margin-left: 10px;
  }

  .el-select {
    width: 110px;
  }
}
</style>
